<template>
  <div class="div_box">
    <div class="header">
      <div>
        <el-select
          v-model="search_val.alarmType"
          placeholder="告警类型"
          size="small"
          clearable
          style="width: 190px; margin-left: 15px"
          @change="AlarmList"
        >
            <el-option
                          v-for="dict in dict.type.device_alarm_type"
                          :key="dict.id"
                          :label="dict.raw.dickLabel"
                          :value="dict.raw.dickValue"
                        />
        </el-select>
        <el-select
          v-model="search_val.status"
          placeholder="处理状态"
          size="small"
          clearable
          style="width: 190px; margin-left: 15px"
          @change="AlarmList"
        >
          <el-option
            v-for="(item, i) in statusList"
            :key="i"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        height="320"
        class="table"
        ref="refTable"
        row-key="id"
        :header-cell-style="headerStyle"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
          height="30"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="alarmType"
          label="告警类型"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
             <dict-tag :options="dict.type.device_alarm_type" :value="row.alarmType"/>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="status"
          label="处理状态"
          min-width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="danger">未处理</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning">处理中</el-tag>
            <el-tag v-else-if="scope.row.status == 3" type="success"
              >已处理</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="告警时间"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="handlingTime"
          label="处理时间"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="处理"
              placement="bottom"
              v-if="row.status != 3"
            >
              <i
                @click="onHandle(row)"
                class="iconfont tixianchuli tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="limit"
        @pagination="AlarmList"
        class="pagination"
      />
    </div>

    <alarmHandling ref="refalarmHandling" :alarmid="alarmid"></alarmHandling>
  </div>
</template>

<script>
import { reqAlarmList } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import alarmHandling from "./alarmHandling.vue";

export default {
   dicts: ['device_alarm_type'],
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Pagination,
    alarmHandling,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      search_val: {
        status: "",
        alarmType: "",
      },
      timeArr: [],
      page: 1,
      limit: 10,
      total: 0,
      statusList: [
        {
          id: "1",
          name: "未处理",
        },
        {
          id: "2",
          name: "处理中",
        },
        {
          id: "3",
          name: "已处理",
        },
      ],
      alarmid: "",
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {},
  methods: {
    onHandle(row) {
      this.alarmid = row.id;
      this.$refs.refalarmHandling.dialogVisible = true;
    },
    // 获取告警列表
    async AlarmList() {
      let res = await reqAlarmList(this.page, this.limit, {
        userId: this.user.userId,
        tenantId: this.user.tenantId,
        roleName: this.user.roleName,
        imei: this.deviceInfo.imei || this.deviceInfo.deviceCode,
        status: this.search_val.status,
        alarmType: this.search_val.alarmType,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total || 0;
    },
    // 点击关闭弹框
    closeDialog() {
      this.tableData = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

.div_box {
  // height: calc(100vh - 212px);
  // height: calc(100vh - 27vh);
  // max-height: 500px;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;

  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;

    // display: flex;
    // justify-content: center;
    .label {
      margin: 10px 0px;

      .name {
        font-size: 16px;
      }
    }
  }

  .right {
    margin-right: 10px;
  }
}

.content {
  height: 100%;
}

.el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

.tableBtnIcon {
  cursor: pointer;
}
</style>